<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref } from "vue";
import { Toast } from 'vant';
import { getpic } from "@/api/pic";
import { Login } from "@/api/login";
import axios from 'axios';
// import "amfe-flexible/index.js"
// import { Toast } from "vant";
let info = ref('发送验证码')
let send:any = ref(null)
let num = 60
let phonenumber = ref('')
let checkcode = ref('')

let countdown = () => {
    let jsq = setInterval(() => {
      if(send.value){
        send.value.disabled = true
      }
      info.value = num + 's'
      num--
      if (num < 0) {
        clearInterval(jsq)
        info.value = '发送验证码'
        send.value.disabled = false
      }
    }, 1000)
}
let login = () =>{
    if(checkcode.value!='0000'){
        Toast.fail({
          message:'验证码错误，请重试',
          position:'top'
        })
    }else{
        router.push('/newtip')
        axios.post('http://127.0.0.1:5173/api/phonenumber',{pid:phonenumber})
        .then(res=>{
          console.log(res);
          localStorage.setItem('token',res.data.data.tokenHead+res.data.data.token)
        })
    }
    
    
}
let router = useRouter()
let notlog = () => {
  router.push('/notlog')
}
onMounted(()=>{
    // console.log(send.value);
})
</script>

<template>
  <div class="section">
    <div class="section1" @click="notlog">
      <van-icon name="cross" />
    </div>
    <div class="section2">MINI.cn</div>
    <div class="section3">
      <div>
        <input type="text" placeholder="手机号" maxlength="11" v-model="phonenumber">
      </div>
      <div>
        <input type="text" placeholder="验证码" maxlength="4" v-model="checkcode">
        <button class="btn1" @click="countdown" ref="send">{{info}}</button>
      </div>
    </div>
    <button class="btn2" @click="login">登录</button>
    <div class="section4">社交账号登录</div>
    <div class="section5">
      <div><img
          src="https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E7%99%BB%E5%BD%95%E9%A1%B5/u569.svg">
      </div>
      <div><img
          src="https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E7%99%BB%E5%BD%95%E9%A1%B5/u570.svg">
      </div>
      <div><img
          src="https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E7%99%BB%E5%BD%95%E9%A1%B5/u571.svg">
      </div>
    </div>
    <div class="section6">BY MINI.LRT</div>
  </div>
</template>

<style scoped>
.section {
  background: url(https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E5%90%AF%E5%8A%A8%E9%A1%B5/u519.png) no-repeat;
  height: 600px;
  overflow: hidden;
}

.section1 {
  width: 20px;
  height: 20px;
  background-color: #C1AB96;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  margin-left: 85%;
  margin-top: 5%;
}

.section2 {
  font-size: 28px;
  color: white;
  margin-top: 10%;
  margin-left: 10%;
}

.section3 {
  top: 15%;
  /* opacity: 0.5; */
  font-size: 12px;
  color: white;
}
.section3 div{
  width: 80%;
  margin-left: 10%;
  margin-top: 5%;
  border-bottom: 1px solid white;
}
.section3 input {
  margin-top: 5%;
  border: none;
  background: none;
}

.section3 div:nth-child(2) input{
    width: 65%;
}

.btn1 {
  font-size: 12px;
  background: none;
  border: none;
  margin-left: 10%;
}

.btn2 {
  width: 80%;
  height: 40px;
  background-color: #C1AB96;
  border: none;
  border-radius: 20px;
  color: white;
  margin-top: 15%;
  margin-left: 10%;
}

.section4 {
  color: #C1AB96;
  margin-top: 30%;
  margin-left: 35%;
}

.section5 {
    margin-top: 5%;
    margin-left: 20%;
}

.section5 div {
  display: inline-block;
  margin-left: 10%;
}

.section6 {
  color: #C1AB96;
  font-size: 12px;
  margin-top: 20%;
  margin-left: 35%;
}
</style>
